import { computed, defineComponent, ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import Page from "@/components/Page/Page";
import styles from "./index.module.less";
import supplierStatusDict from "@/common/dicts/supplierStatusDict";
import supplierTypeDict from "@/common/dicts/supplierTypeDict";
import supplierCompanyDict from "@/common/dicts/supplierCompanyDict";

export default defineComponent({
  setup() {
    const route = useRoute();
    const router = useRouter();
    const routeTypeText = {
      add: "新建供应商",
      edit: "供应商修改",
      detail: "供应商详情",
    }
    const routeType = computed(() => {
      switch (route.name) {
        case "SupplierListAdd":
          return "add";
        case "SupplierListEdit":
          return "edit";
        case "SupplierListDetail":
          return "detail";
        default:
          return "detail";
      }
    })
    const getRouteType = () => {
      return routeTypeText[routeType.value];
    }
    const formRef = ref(null as any);
    const state = reactive({
      form: {
        supplierName: null,
        supplierHelpCode: null,
        supplierStatus: 2,
        supplierType: 1,
        companyName: null,
        companyCode: null,
        companyType: 1,
        companyCorporation: null,
        companyRegisteredCapital: null,
        companyLocation: null,
        companyAddress: null,
        companyArea: null,
        businessLicense: null,
        businessCertificate: null,
        productionLicense: null,
        businessLicenseLifespan: [],
        businessCertificateLifespan: [],
        businessLicenseLifespanLifespan: [],
        bankName: null,
        bankAccount: null,
        accountName: null,
        contacts: [],
      },
      submiting: false,
    })
    const submit = () => {

    }
    return () => (
      <Page>
        <div class={styles.supplierModify}>
          <div class={styles.breadcrumbBox}>
            <a-breadcrumb>
              <a-breadcrumb-item>供应商管理</a-breadcrumb-item>
              <a-breadcrumb-item>供应商列表</a-breadcrumb-item>
              <a-breadcrumb-item>{getRouteType()}</a-breadcrumb-item>
            </a-breadcrumb>
          </div>
          <div class={styles.container}>
            <div class={styles.content}>
              <a-form style={{ width: "100%" }} ref={formRef} model={state.form}>
                <a-row gutter={[16, 16]}>
                  <a-col span={9}>
                    <a-form-item required label="供应商名称" name="supplierName">
                      <a-input v-model:value={state.form.supplierName} />
                    </a-form-item>
                  </a-col>
                  <a-col span={9}>
                    <a-form-item required label="供应商助记码" name="supplierHelpCode">
                      <a-input v-model:value={state.form.supplierHelpCode} placeholder="用于快速检索，建议首字母大写" />
                    </a-form-item>
                  </a-col>
                  <a-col span={6}>
                    <a-form-item required label="状态" name="supplierStatus">
                      <a-select v-model:value={state.form.supplierStatus} options={supplierStatusDict} />
                    </a-form-item>
                  </a-col>
                  <a-col span={6}>
                    <a-form-item required label="供应商分类" name="supplierType">
                      <a-select v-model:value={state.form.supplierType} options={supplierTypeDict} />
                    </a-form-item>
                  </a-col>
                  <a-col span={24}>
                    <a-divider orientation="left">注册信息</a-divider>
                  </a-col>
                  <a-col span={8}>
                    <a-form-item required label="公司名称" name="companyName">
                      <a-input v-model:value={state.form.companyName} />
                    </a-form-item>
                  </a-col>
                  <a-col span={8}>
                    <a-form-item required label="统一社会信用代码" name="companyCode">
                      <a-input v-model:value={state.form.companyCode} placeholder="用于快速检索，建议首字母大写" />
                    </a-form-item>
                  </a-col>
                  <a-col span={8}>
                    <a-form-item required label="企业类型" name="companyType">
                      <a-select v-model:value={state.form.companyType} options={supplierCompanyDict} />
                    </a-form-item>
                  </a-col>
                  <a-col span={8}>
                    <a-form-item label="法人代表" name="companyCorporation">
                      <a-input v-model:value={state.form.companyCorporation} />
                    </a-form-item>
                  </a-col>
                  <a-col span={8}>
                    <a-form-item label="注册资本" name="companyRegisteredCapital">
                      <a-input v-model:value={state.form.companyRegisteredCapital} />
                    </a-form-item>
                  </a-col>
                  <a-col span={8}>
                    <a-form-item label="所属地" name="companyLocation">
                      <a-input v-model:value={state.form.companyLocation} />
                    </a-form-item>
                  </a-col>
                  <a-col span={24}>
                    <a-form-item label="注册地址" name="companyAddress">
                      <a-input v-model:value={state.form.companyAddress} />
                    </a-form-item>
                  </a-col>
                  <a-col span={24}>
                    <a-form-item required label="经营范围" name="companyArea">
                      <a-textarea v-model:value={state.form.companyArea} placeholder="请输入公司经营范围"/>
                    </a-form-item>
                  </a-col>
                  <a-col span={24}>
                    <a-divider orientation="left">开户行信息</a-divider>
                  </a-col>
                </a-row>
              </a-form>
            </div>
          </div>
          <div class={styles.footer}>
            <a-button onClick={() => { router.replace({name: "SupplierListMgr"}) }}>返回</a-button>
            <a-button type="primary" loading={state.submiting} onClick={() => { submit() }}>创建</a-button>
          </div>
        </div>
      </Page>
    )
  }
})